<template>
	<!-- 搜索 -->
	<view class="">
		<view class="cu-bar search   search-box" style="background: rgb(1, 136, 255);">
			<view class="search-form round" style="height: 85rpx;font-size: 35rpx;">
				<text class="cuIcon-search"></text>
				<input style="font-size: 30rpx;    padding-right: 181rpx;" @confirm.stop="to" v-model="search"
					:adjust-position="false" type="text" placeholder="请输入作者口令" confirm-type="search"></input>
				<!-- #ifndef H5 -->
				<view class="copy round" v-if="!search" style="" @tap="getClipboardData">
					粘贴
				</view>
				<!-- #endif -->
				<view class="copy round"
					style="width: 60rpx;height: 60rpx; background: #ff7984;color: #fff;font-size: 30rpx" v-if="search"
					@tap="search = ''">
					×
				</view>
			</view>
			<view class="action" style="display: flex;align-items: center;">

				<button @tap="to" class=" search-btn cu-btn bg-green shadow-blur round">搜索</button>
			</view>
		</view>
		<modal ref="modal"></modal>
	</view>
</template>

<script>
	import {
		mixinAdvertising
	} from '@/mixin/advertising.js'
	export default {
		mixins: [mixinAdvertising],
		data() {
			return {
				InputBottom: 0,
				search: ""
			}
		},
		mounted() {

		},
		methods: {
			getClipboardData() {
				var t = this
				uni.getClipboardData({
					success: function(res) {
						console.log(res)
						t.search = res.data
					},
					fail(e) {
						console.log(e)
					}
				});


			},
			async to() {
				var vipConfig = uni.getStorageSync('vipConfig')
				var user = uni.getStorageSync('user')
				if (!user && vipConfig.isSearchLogin) {
					this.$refs['modal'].modalName = 'Modal'
					return
				}
				uni.navigateTo({
					url: "/pages/common/author-details?framer_id=" + this.search
				})

			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}
		}
	}
</script>

<style scoped lang="scss">
	.copy {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #3e3e3e;
		z-index: 9999;
		width: 100rpx;
		height: 70rpx;
		background: #ccc;
		position: absolute;
		right: 220rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.search-box {
		position: relative;

		.search-btn {
			// border-radius: 50%;
			border-top: none;
			background: #ffdd95;
			position: absolute;
			right: 10rpx;
			transform: translateY(-50%);
			top: 50%;
			color: #000;
			height: 85rpx;
			width: 200rpx;
			font-size: 32rpx;
		}
	}
</style>
